"use client";

import { useRouter } from "next/navigation";
import TestIntroPage from "@/components/Componentes/test-intro-page";
import NavigationButton from "@/components/Componentes/navigation-button";
import StickyHeader from "@/components/Componentes/sticky-header";
import { PageBackground } from "@/components/Componentes/page-background";

type TestIntroClientProps = {
  title: string;
  estimateTime: string;
  estimateLabel: string;
  disclaimerText: string;
  startLabel: string;
  bulletPoints: readonly string[];
  closeLabel: string;
  informationLabel: string;
};

export default function TestIntroClient({
  title,
  estimateTime,
  estimateLabel,
  disclaimerText,
  startLabel,
  bulletPoints,
  closeLabel,
  informationLabel,
}: TestIntroClientProps) {
  const router = useRouter();

  return (
    <>
      <PageBackground disabled />
      <main className="-mx-[17px] flex h-svh flex-col overflow-hidden bg-[#F7F1F0]">
        <StickyHeader sticky={false} className="shrink-0">
          <div className="flex items-center gap-4">
            <NavigationButton
              className="shrink-0"
              variant="transparent"
              icon="back"
              iconLabel={closeLabel}
            />
            <h1 className="min-w-0 flex-1 text-center font-semibold text-white truncate">
              {title}
            </h1>
            <div className="size-10 shrink-0" />
          </div>
        </StickyHeader>

        <div className="mx-auto flex w-full max-w-md flex-1 flex-col px-[17px] pt-3 min-h-0">
          <TestIntroPage
            title={title}
            estimateTime={estimateTime}
            description={estimateLabel}
            bulletPoints={bulletPoints}
            disclaimerText={disclaimerText}
            startLabel={startLabel}
            onStart={() => {
              router.back();
            }}
          />
        </div>
      </main>
    </>
  );
}